//当前顶部高度
let nowMarginTop = "6vh";
function handleFullScreen (dialog, isFullScreen, marginTop, width) {
  if (!dialog) return false;
  if (isFullScreen) {
    dialog.style.marginTop = "0";
    dialog.style.position = "absolute";
    dialog.style.top = "0px";
    dialog.style.bottom = "0px";
    dialog.style.left = "0px";
    dialog.style.width = "100%";
    // 添加class
    dialog.classList.add("is-full-screen");
  } else {
    dialog.style.marginTop = marginTop;
    dialog.style.width = width;
    dialog.style.position = "relative";
    // 删除class
    dialog.classList.remove("is-full-screen");
  }
}

export default {
  bind: function (el, binding, vnode) {
    let isFullScreen = false;

    const dialog = el.querySelector(".el-dialog");
    const header = el.querySelector(".el-dialog__header");
    if (!header || !dialog || !vnode) return;
    header.style.paddingRight = "43px";
    dialog.style.marginTop = nowMarginTop;
    // header.style.boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
    const { width, top } = vnode.componentInstance;
    const fullScreenBtn = document.createElement("button");
    fullScreenBtn.type = "button";
    fullScreenBtn.style = "float:right;padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:16px;margin-right: 20px;";

    const fullScreenIcon = document.createElement("i");
    fullScreenIcon.className = "el-icon el-icon-full-screen";
    fullScreenBtn.append(fullScreenIcon);

    fullScreenBtn.addEventListener("click", () => {
      isFullScreen = !isFullScreen;
      handleFullScreen(dialog, isFullScreen, nowMarginTop, width);
      return false;
    });

    header.append(fullScreenBtn);

    header.addEventListener("dblclick", () => {
      isFullScreen = !isFullScreen;
      handleFullScreen(dialog, isFullScreen, nowMarginTop, width);
      return false;
    });
  },
  componentUpdated (el, binding, vnode) {
    const dialog = el.querySelector(".el-dialog");
    const { width, top } = vnode.componentInstance;
    handleFullScreen(dialog, false, nowMarginTop, width);
  }
};
